<template>
  <h1>患者</h1>
  <div class="f-patient-banner-demo">
    <div class="title">f-patient-banner 患者病历条</div>
    <f-super-set
      :options="options"
      v-model:value="type"
      class="w140"></f-super-set>

    <f-button @click="handleReload" class="ml10" type="primary">刷新LoadData</f-button>
  </div>

  <f-patient-banner
    :vid="vid"
    :vtype="vtype"
    :type="type"
    ref="patientBannerRef"></f-patient-banner>

  <br />
  
  <h3>f-patient-avatar 患者头像</h3>
  <f-patient-avatar
    :gender="{code:'2',desc:'男性'}"
  />
  <br />

  <h3>f-patient-list 患者列表</h3>
  <div class="h400">
    <f-patient-list
      :query="apiServe"
      :currentType="'checkbox'"
      @current="handleTest" />
  </div>

</template>

<script setup>
import { ref } from "vue";
import { http } from "../../packages/utils";

const patientBannerRef = ref();
const options = ref([
  { label: "1.门诊医生", value: "1" },
  { label: "2.急诊医生", value: "2" },
  { label: "3.住院医生", value: "3" },
  { label: "4.住院护士", value: "4" },
  { label: "5.质控", value: "5" }
]);
const type = ref("4");
// 住院ID 1720251395058111240 就诊ID 1806589754501619712
const vid = ref("1902252271931834368p");
const vtype = ref("11");
function handleReload() {
  patientBannerRef.value.loadData();
}

const handleTest = (value) => console.log(value);

const patientTable = ref([
  { name: '伊一', age: '14岁', birthDay: '2010-04-03', gender: { code: '1', desc: '男' } },
  { name: '吴二', age: '24岁', birthDay: '2000-04-03', gender: { code: '1', desc: '男' } },
  { name: '张三', age: '68岁', birthDay: '1956-04-03', gender: { code: '1', desc: '男' } },
  { name: '李四', age: '2岁1月', birthDay: '2022-10-23', gender: { code: '2', desc: '女' } },
  { name: '王五', age: '33岁', birthDay: '1991-05-19', gender: { code: '2', desc: '女' } },
  { name: '赵六', age: '3月', birthDay: '2024-08-19', gender: { code: '1', desc: '男' } },
]);

const apiServe = () => http.post(
  '/visit/register/queryPatientPage',
  {
    "filter": true,
    "personOrDept": "1",
    "status": "0",
    "visitType": "11",
    "size": 100
  }).then(res => {
    res.data = res.data.map((m, i) => ({
      ...m,
      id: i,
      name: m.patientName
    }));
    // patientTable.value = res.data;
    return res.data;
  });

</script>

<style lang="scss">
.f-patient-banner-demo {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 10px;
  .title {
    font-weight: bold;
    margin-right: 10px;
  }
}
</style>
